import { Avatar, Divider, Tag, Tooltip } from 'antd'
import { QqOutlined, WechatOutlined, GithubOutlined } from '@ant-design/icons'

export default function Author() {
    return (
        <div className="author-div">
            <div> <Avatar size={100} src="https://joeschmoe.io/api/v1/random" /></div>
            <div className="author-introduction">
                软件工程在读学生<br />前端小菜鸡😊 <br />向着前端进军！<br />
                <Tag color="magenta">React</Tag>
                <Tag color="green">Vue</Tag>
                <Tag color="geekblue">Egg</Tag>
                <Divider>社交账号</Divider>
                <Tooltip title="https://gitee.com/a_liao">
                    <a href="https://gitee.com/a_liao">
                        <Avatar size={28} icon={<GithubOutlined />} className="account" />
                    </a>
                </Tooltip>
                <Tooltip title="QQ:1530595040">
                    <Avatar size={28} icon={<QqOutlined />} className="account" />
                </Tooltip>
                <Tooltip title="wechat:derderliao">
                    <Avatar size={28} icon={<WechatOutlined />} className="account" />
                </Tooltip>
            </div>
            <style>
                {`
                    .author-div{
                        background-color: #ffffff;
                        text-align: center;
                        padding: 1rem;
                    
                    }
                    .author-div div{
                        margin-bottom: 1rem;
                    
                    }
                    .author-introduction{
                        font-size:.8rem;
                        color: #999;
                        
                    }
                    .account{
                        background-color: #999;
                        margin-left: .5rem !important;
                        margin-right: .5rem !important;
                    }
                    .author-name{
                        font-size: 1rem;
                        color: #1890ff;
                    }
                    .author-tag{
                        line-height: 27px;
                    }
                    
                    .ant-avatar-image{
                        background: #ccc !important;
                    }
                `}
            </style>
        </div>
    )
}